<template>
  <div class="page-container page-container-create" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>自动化营销</el-breadcrumb-item>
        <el-breadcrumb-item>用户组管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看用户分组</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--添加用户分组-->
    <el-form :model="dataForm" ref="dataForm" :size="size" :label-position="labelPosition" >
      <el-row class="search-input">
      <el-form-item v-if="false" prop="id">
        <el-input v-model="dataForm.id"></el-input>
      </el-form-item>
      <el-form-item label="用户分组名称：" prop="userGroupName">
        <span class=" color333">{{dataForm.userGroupName}}</span>
      </el-form-item>
      <el-form-item label="分组类型：" prop="groupType" label-width="115px">
        <span class=" color333">{{dataForm.groupType == 1 ? '动态分组' : '静态分组'}}</span>

      </el-form-item>
      <el-form-item label="分组描述：" prop="groupDescription" label-width="115px">
        <span class=" color333">{{dataForm.groupDescription}}</span>
      </el-form-item>
      </el-row>
      <el-form-item label="筛选用户标签：">
        <!--用户标签-->
        <div class="tab-container mb40" v-if="deptType==0">
          <el-tabs v-model="activeDeptId" @tab-click="handleClick()">
            <el-tab-pane v-for="item in deptOptions" :key="item.id" :name="item.id" :label="item.deptName"></el-tab-pane>
          </el-tabs>
        </div>

        <!--用户标签内容-->
        <div class="tree mb170">
          <div class="leftTree">
            <el-tree
              ref="leftTree"
              :data="labelTree"
              show-checkbox
              default-expand-all
              node-key="id"
              :props="defaultProps"
              highlight-current></el-tree>
          </div>
          <div class="rightTree">
            <div class="li">
              <template>
                <el-tree
                  ref="rightTree"
                  :data="labelTree2"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  :props="defaultProps"
                  :indent="0"
                  highlight-current
                  :expand-on-click-node="false">
                  <div class="custom-tree-node" slot-scope="{ node,data }" :class="data.secondStyle?'secondStyle':''">
                    <p><span>{{ node.label }} </span></p>
                    <span v-if="!data.children" class="noData">暂无数据</span>
                  </div>
                </el-tree>
              </template>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div style="text-align: center">
          <el-row >
            <el-button class="searchButton" @click="handlerSubmit()">确认</el-button>
          </el-row>
        </div>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import KtButton from '@/views/Core/KtButton'

  export default {
    components: {
      KtButton
    },

    data() {
      return {
        activeDeptId: 0,
        deptType: localStorage.getItem('deptType'),     // 当前登录用户所属组织类型
        userGroupId: this.$route.params.userGroupId,        // 得到用户组id
        deptOptions: [],
        HEIGHT: window.innerHeight,
        size: 'mini',
        labelPosition: 'right',
        dataForm: {
          userGroupName: '',
          groupType: '',
          groupDescription: '',
          userGroupNumber: 0
        },
        labelTree: [],
        labelTree2: [],
        defaultProps: {
          children: 'children',
          label: 'labelName'
        },

        saveAllLabel: [],                                  // 保存所有选中标签
        currentSelectedDeptId: '',                         // 当前选中部门id
        echoAllLabel: []                                   // 回显所有标签值
      }
    },

    methods: {
      // 得到用户组详情
      getUserGroupDetail: function () {
        let this_ = this
        this.utils.request.getUserGroupDetail({id: this.userGroupId}, res => {
          if (res.code == '0000') {
            this_.dataForm = res.data
            if (this_.dataForm.groupType == 0) {
              this_.dataForm.groupType = ''
            }
          } else {
            this.dataForm = {
              userGroupName: '',
              groupType: '',
              groupDescription: '',
              userGroupNumber: 0
            }
          }
        })
      },

      // 得到所有组织标签
      getDeptList: function () {
        let this_ = this
        this.utils.request.getDeptList({}, res => {
          if (res.code == '0000') {
            if (this_.deptType == 0) {
              this_.deptOptions = res.data
              this_.currentSelectedDeptId = res.data[0].id
              this_.activeDeptId = res.data[0].id
            }
            this_.queryLabelByDeptId()
            this_.queryAllLabelByDeptId()
          }
        })
      },

      // 组织切换
      handleClick() {
        // 切换时更新用户信息
        this.currentSelectedDeptId = this.activeDeptId
        this.queryLabelByDeptId()
        this.queryAllLabelByDeptId()
      },

      // 根据部门id获取一二级标签树
      queryLabelByDeptId: function () {
        let this_ = this
        let params = {
          userGroupId: this_.userGroupId,
          deptId: this_.currentSelectedDeptId
        }
        this.utils.request.queryLabelByDeptId(params, res => {
          if (res.code == '0000') {
            this_.labelTree = JSON.parse(JSON.stringify(res.data))
            this_.labelTree.forEach(item => {
              this_.$set(item, 'disabled', true)
              item.children.forEach(item1 => {
                if (item.children != null) {
                  this_.$set(item1, 'disabled', true)
                }
              })
            })
          } else {
            this_.labelTree = []
          }
        })
      },

      // 根据部门id获取二三级标签树
      queryAllLabelByDeptId: function () {
        this.saveAllLabel = []
        let this_ = this
        let params = {
          userGroupId: this_.userGroupId,
          deptId: this_.currentSelectedDeptId
        }
        this.utils.request.queryAllLabelByDeptId(params, res => {
          if (res.code == '0000') {
            this_.labelTree2 = JSON.parse(JSON.stringify(res.data))
            // 回显所有标签值
            // 左边树结构
            let secondLabel = []
            let threeLabel = []
            this_.labelTree2.forEach(item => {
              this_.$set(item, 'secondStyle', true)
              // 左边树结构
              if (item.children != null) {
                item.children.forEach(item1 => {
                  this_.$set(item1, 'disabled', true)
                  // 右边树结构
                  if (item1.isChecked) {
                    secondLabel.push(item.id)
                    threeLabel.push(item1.id)
                  }
                })
              }
            })
            this_.$refs.leftTree.setCheckedKeys(secondLabel)
            this_.$refs.rightTree.setCheckedKeys(threeLabel)
            this_.saveAllLabel = threeLabel
          } else {
            this_.labelTree2 = []
          }
        })
      },

      // 确认按钮
      handlerSubmit() {
        this.$router.push('/pages/AutoMarket/UserGroupManagement/UserGroup')
      },
    },

    mounted() {
      this.userGroupId = this.$route.params.userGroupId
      this.getUserGroupDetail()
      this.getDeptList()
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #409EFF;
    border-color: #409EFF;
  }

  .deleteAll {
    padding: 0;
  }

  .tree {
    // width: 1200px;
    // margin-top: 10px;
    margin-left: 118px;
    position: relative;
    display: flex;
    justify-content: flex-start;

    .leftTree {
      padding: 20px;
      width: 238px;
      min-height: 600px;
      left: 0;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    }

    .rightTree {
      width: 100%;
      min-height: 600px;
      margin-left: 20px;

      .li {
        /deep/ .el-tree {
          .el-tree-node {
            margin-bottom: 20px;
          }

          .el-tree-node__content {
            height: 40px;
            margin: 0;

            .expanded {
              visibility: hidden
            }

            .secondStyle {
              width: 100%;

              p {
                height: 40px;
                line-height: 40px;
                background: #ececec;
                position: relative;

                &::before {
                  content: "";
                  width: 40px;
                  height: 40px;
                  position: absolute;
                  left: -40px;
                  top: 0;
                  z-index: 999;
                  background: #ececec;
                }
              }
            }

            .noData {
              display: block;
              width: 100%;
              height: 40px;
              line-height: 40px;
              position: absolute;
              left: 0;
              text-align: center;
            }
          }

          .el-tree-node__children {
            min-height: 40px;
            display: flex;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);

            .noData {
              display: none;
            }

            .el-tree-node__label {
              background: #fff;
            }

            .el-tree-node {
              margin-bottom: 0;
            }

            .el-tree-node__children {
              display: none;
            }
          }
        }
      }
    }
  }

  .tab-container {
    /deep/ .el-tabs {
      .el-tabs__item {
        width: auto;
        padding: 0 24px !important;
      }
    }
  }

  .desc {
    color: #ffb100;
    font-size: 10px;
    margin-top: 10px;
  }

  .spanTop {
    padding-top: 8px;
    display: inline-block;
    font-size: 14px;
    color: #333;
  }


   /deep/ .el-tabs__nav-prev{
    height: 32px ;
    line-height: 32px;
  }
  /deep/ .el-tabs__nav-next {
    height: 32px ;
    line-height: 32px;
  }
  .mb170{
    margin-bottom: 170px !important;
  }
  .mb20{
    margin-bottom: 20px !important;
  }
  .mb80{
    margin-bottom: 80px !important;
  }
  .mr60{
    margin-right: 60px !important;
  }
  .h32{
    height: 32px;
  }
  .lh32{
    line-height: 32px;
  }
  /deep/ .filterBtn{
    width: 176px ;
    height: 38px;
    font-size: 18px;
  }
   .tab-container {
    /deep/ .el-tabs {
      .el-tabs__item {
        width: auto;
        padding: 0 24px !important;
      }
    }
    /deep/ .el-tabs{
      .el-tabs__header {
      margin:0 !important
     }
    }
  }
  /deep/ .el-tabs__nav-wrap{
    &:after{
      background: none;
    }
  }
</style>
